<template>
    <div class="xtx-carousel" @mousemove="autoPlayStop" @mouseleave="autoPlayStart">
        <ul class="carousel-body">
            <li
                class="carousel-item"
                v-for="(pic, pIndex) in sliders"
                :key="pic.id"
                :class="{ 'fade': pIndex === showIndex }"
            >
                <RouterLink to="/">
                    <img :src="pic.imgUrl" alt />
                </RouterLink>
            </li>
        </ul>
        <a @click="toggle(-1)" href="javascript:;" class="carousel-btn prev">
            <i class="iconfont icon-angle-left"></i>
        </a>
        <a @click="toggle(1)" ef="javascript:;" class="carousel-btn next">
            <i class="iconfont icon-angle-right"></i>
        </a>
        <div class="carousel-indicator">
            <span
                v-for="(pic, pIndex) in sliders"
                :key="pic.id"
                :class="{ 'active': pIndex === showIndex }"
            ></span>
        </div>
    </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
    name: 'XtxCarousel',
    props: {
        sliders: {
            type: Array,
            default: () => []
        },
        autoPlay: {
            type: Boolean,
            default: true
        },
        duration: {
            type: Number,
            default: 3000
        }
    },
    setup(props) {
        const showIndex = ref(0)
        // 自动轮播函数
        let timer = null
        const autoPlayFn = () => {
            timer = setInterval(() => {
                showIndex.value++
                if (showIndex.value > props.sliders.length - 1) showIndex.value = 0
            }, props.duration);
        }
        // 自动轮播函数执行时机
        watch(() => props.sliders, (newVal) => {
            if (newVal.length && props.autoPlay) {
                showIndex.value = 0
                autoPlayFn()
            }
        }, { immediate: true })

        // 鼠标移入或离开,轮播暂停或开启
        const autoPlayStart = () => {
            if (props.sliders.length && props.autoPlay) {
                autoPlayFn()
            }
        }
        const autoPlayStop = () => {
            if (timer) clearInterval(timer)
        }

        // 手动切换轮播图
        const toggle = (step) => {
            const newIndex = showIndex.value + step
            console.log(newIndex);
            // 超过最大值
            if (newIndex >= props.sliders.length) {
                showIndex.value = 0
                return
            }
            // 超出最小值
            if (newIndex < 0) {
                showIndex.value = props.sliders.length - 1
                return
            }
            // 正常
            showIndex.value = newIndex
        }

        return {
            showIndex,
            autoPlayStart,
            autoPlayStop,
            toggle
        }

    }
}
</script>
<style scoped lang="less">
.xtx-carousel {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 150px;
    position: relative;
    .carousel {
        &-body {
            width: 100%;
            height: 100%;
        }
        &-item {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 0.5s linear;
            &.fade {
                opacity: 1;
                z-index: 1;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        &-indicator {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;
            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
                cursor: pointer;
                ~ span {
                    margin-left: 12px;
                }
                &.active {
                    background: #fff;
                }
            }
        }
        &-btn {
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, 0.2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all 0.5s;
            &.prev {
                left: 20px;
            }
            &.next {
                right: 20px;
            }
        }
    }
    &:hover {
        .carousel-btn {
            opacity: 1;
        }
    }
}
</style>
